import { defineComponent, ref } from 'vue'
import {
  FormInst,
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NPagination,
  NSelect,
  NSpace,
  useMessage
} from 'naive-ui'
import styles from './tab-table.module.scss'
import {
  getOptionsData,
  getDetailTableData
} from '@/service/modules/integration-govern'

const props = {
  apiUriType: {
    type: Number,
    default: 0,
    required: true
  }
}

const tabTable = defineComponent({
  name: 'tabTable',
  props,
  setup(props) {
    const apiUriTypeBase = {
      0: '/govern/governance/governanceOptions/calc',
      1: '/govern/governance/governanceOptions/storage',
      2: '/govern/governance/governanceOptions/spec',
      3: '/govern/governance/governanceOptions/security',
      4: '/govern/governance/governanceOptions/quality'
    }

    const createColumns = [
      { title: '表名', key: 'tableName' },
      { title: '描述', key: 'governanceContent' }
    ]

    const tableList = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: any) => {
        pagination.value.page = page
        handleTable()
      },
      onUpdatePageSize: (pageSize: any) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleTable()
      }
    })

    const message = useMessage()

    const handleTable = function () {
      pagination.value.loading = true
      getDetailTableData(
        // @ts-ignore
        tabSearchForm.value.optionCode,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          tableList.value = res.data.records
          pagination.value.pageCount = Math.ceil(
            res.data.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    const getOptions = function () {
      // @ts-ignore
      getOptionsData(apiUriTypeBase[props.apiUriType])
        .then((res: any) => {
          options.value = res.data
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
        })
    }

    const tabSearchForm = ref({
      optionCode: undefined
    })

    const rules = ref({
      optionCode: { required: true, message: '请选择类型', trigger: 'blur' }
    })

    const options = ref([])

    getOptions()

    const formRef = ref<FormInst | null>(null)

    const searchSubmit = function (e: MouseEvent) {
      e.preventDefault()
      formRef.value?.validate((errors) => {
        if (!errors) {
          handleTable()
        }
      })
    }

    return {
      columns: createColumns,
      tableList,
      pagination,
      handleTable,
      apiUriTypeBase,
      message,
      tabSearchForm,
      options,
      rules,
      searchSubmit,
      formRef
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NForm
          inline
          labelPlacement={'left'}
          model={this.tabSearchForm}
          rules={this.rules}
          size={'medium'}
          labelWidth={'100px'}
          ref={'formRef'}
        >
          <NFormItem path='optionCode' label='类型'>
            <NSelect
              labelField={'optionDesc'}
              class={styles['form-item']}
              valueField={'optionCode'}
              v-model:value={this.tabSearchForm.optionCode}
              options={this.options}
              clearable
            ></NSelect>
          </NFormItem>
          <NFormItem>
            <NButton type='primary' onClick={this.searchSubmit}>
              搜索
            </NButton>
          </NFormItem>
        </NForm>
        <NDataTable
          columns={this.columns}
          data={this.tableList}
          loading={this.pagination.loading}
        ></NDataTable>
        <NPagination
          class={styles['page-position']}
          display-order={['quick-jumper', 'pages', 'size-picker']}
          page-count={this.pagination.pageCount}
          page-size={this.pagination.pageSize}
          page-sizes={this.pagination.pageSizes}
          page={this.pagination.page}
          on-update:page={this.pagination.onUpdatePage}
          on-update:page-size={this.pagination.onUpdatePageSize}
          show-quick-jumper
          show-size-picker
        ></NPagination>
      </NSpace>
    )
  }
})

export default tabTable
